<style scoped lang="less">
	.footer {
		margin-top: 30px;
		text-align: right;
	}
	
	.stock-add {
		width: auto;
		text-align: center;
		padding: 40px;
		min-height: 80px;
		display: flex;
		font-size: 20px;
		align-items: center;
		background-color: white;
		margin-left: 5px;
		border: #f0f0f0 1px solid;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 500ms ease;
	}
	
	.stock-add:hover {
		background-color: #c8dbef;
	}
	
	.sku-item-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	
	span.stock-item-del, span.stock-item-edit {
		position: absolute;
		cursor: pointer;
		color: #2b8ff2;
	}
	
	span.stock-item-edit {
		right: 5px;
	}
	
	.stock-item-title {
		text-align: center;
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	.sku-item {
		margin: 0 5px;
		border: #f0f0f0 1px solid;
		border-radius: 5px;
		padding: 5px;
		width: 150px;
		position: relative;
	}
	
	.content-item-wrap {
		padding: 2px;
		transition: background-color 300ms ease;
		display: flex;
	}
	
	.content-item-wrap:hover {
		background-color: #d3d3d3;
	}
	
	span.item-title {
		color: gray;
		width: 70px;
	}
	
	span.item-info {
		font-weight: bold;
	}
</style>
<template>
	<Card>
		<Form v-if="vipData!=null" ref="myForm" :rules="ruleValidate" :model="vipData" :label-width="80">
			<FormItem label="顶部颜色">
				<ColorPicker v-model="vipData.top_color"/>
			</FormItem>
			<FormItem label="名称" prop="name">
				<Input v-model="vipData.name" placeholder="请输入名称" style="width: 200px"></Input>
			</FormItem>
			
			<FormItem label="VIP卡片图" prop="banner">
				<SelectImg v-model="vipData.banner" @on-selected-imgs="imgSelected" :canOp="true"
				           :limit="1"
				           :initList="vipData.banner"></SelectImg>
			</FormItem>
			<FormItem label="VIP套餐">
				<div class="sku-item-wrap">
					<div class="sku-item" v-for="(item,index) in vipData.sku">
						<span class="stock-item-del" @click="delSku(index)">删除</span>
						<span class="stock-item-edit" @click="editSku(index)">编辑</span>
						<div class="stock-item-title">{{'套餐'+(index+1)}}</div>
						<div class="item-content">
							<div class="content-item-wrap">
								<span class="item-title">名称</span>
								<span class="item-info">{{item.title}}</span>
							</div>
							<div class="content-item-wrap">
								<span class="item-title">原价</span>
								<span class="item-info">{{item.original_price}}</span>
							</div>
							<div class="content-item-wrap">
								<span class="item-title">现价</span>
								<span class="item-info">{{item.lowest_price}}</span>
							</div>
							<div class="content-item-wrap">
								<span class="item-title">时长(天)</span>
								<span class="item-info">{{item.time}}</span>
							</div>
							<div class="content-item-wrap">
								<span class="item-title">赏金</span>
								<span class="item-info">{{item.reward}}</span>
							</div>
						</div>
					</div>
					<div class="stock-add" @click="add">添加</div>
				</div>
			
			</FormItem>
		
		
		</Form>
		<div class="footer">
			<Button type="primary" @click="save" :loading="loading">确定</Button>
		</div>
		<Modal v-model="modalSetting.show">
			<Form v-if="skuFormItem!=null" ref="skuForm" :rules="skuRuleValidate" :model="skuFormItem" :label-width="80">
				<FormItem label="名称" prop="title">
					<Input v-model="skuFormItem.title" placeholder="请输入名称" style="width: 200px"></Input>
				</FormItem>
				<FormItem label="原价" prop="original_price">
					<InputNumber :min="0" v-model="skuFormItem.original_price" placeholder="请输入原价"
					             style="width: 200px"></InputNumber>
				</FormItem>
				<FormItem label="现价" prop="lowest_price">
					<InputNumber :min="0" v-model="skuFormItem.lowest_price" placeholder="请输入现价"
					             style="width: 200px"></InputNumber>
				</FormItem>
				<FormItem label="赏金" prop="reward">
					<InputNumber :min="0" v-model="skuFormItem.reward" placeholder="推荐其他用户开通的佣金"
					             style="width: 200px"></InputNumber>
				</FormItem>
				<FormItem label="时长" prop="time">
					<InputNumber :min="0" :precision="0" v-model="skuFormItem.time" placeholder="单位(天)"
					             style="width: 200px"></InputNumber>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
				<Button type="primary" @click="addSku">确定</Button>
			</div>
		</Modal>
	</Card>
</template>
<script>
  import SelectImg from '../../components/select-img'
  import {get, save} from '@/api/vip'

  export default {
    name: 'vip-setting',
    components: {
      SelectImg
    },
    data() {
      return {
        modalSetting: {
          show: false
        },
        loading: false,
        vipData: null,
        skuFormItem: null,
        ruleValidate: {
          name: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          banner: [
            {type: 'array', required: true, message: '名称不能为空', trigger: 'blur'}
          ]
        },
        skuRuleValidate: {
          title: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          original_price: [
            {type: 'number', required: true, message: '原价不能为空', trigger: 'blur'}
          ],
          reward: [
            {type: 'number', required: true, message: '赏金不能为空', trigger: 'blur'}
          ],
          lowest_price: [
            {type: 'number', required: true, message: '现价不能为空', trigger: 'blur'}
          ],
          time: [
            {type: 'number', required: true, message: '时长不能为空', trigger: 'blur'}
          ]
        }
      }
    },

    created() {
      this.getData();
    },
    methods: {
      add() {
        this.modalSetting.show = true;
        this.skuFormItem = {
          add: true,
          title: '',
          original_price: 0,
          lowest_price: 0,
          reward: 0,
          time: 1,
          stock: 9999999
        };
      },
      editSku(index) {
        this.modalSetting.show = true;
        this.skuFormItem = this.vipData.sku[index];
        this.skuFormItem.add = false;
      },
      delSku(index) {
        if (this.vipData.sku.length > 1) {
          this.vipData.sku.splice(index, 1);
        } else {
          this.$Message.info('最少需要一个套餐');
        }
      },
      addSku() {
        let vm = this;
        vm.$refs['skuForm'].validate((valid) => {
            if (valid) {
              if (vm.skuFormItem.id == null && vm.skuFormItem.add) {
                vm.vipData.sku.push(vm.skuFormItem);
              }
              this.modalSetting.show = false;
            }
          }
        );
      },
      cancel() {
        this.modalSetting.show = false;
      },
      imgSelected(imgs) {
        this.vipData.banner = imgs;
      },
      getData() {
        let vm = this;
        get().then(rep => {
          if (rep.data.data.top_color === null) {
            rep.data.data.top_color = '#DD4738'
          }
          if (rep.data.data.banner != null) {
            rep.data.data.banner = JSON.parse(rep.data.data.banner);
          }
          if (rep.data.data.sku === undefined) {
            rep.data.data.sku = [];
          } else {
            rep.data.data.sku.forEach((item, index) => {
              item.original_price = vm.GLOBAL.convertPrice(item.original_price);
              item.lowest_price = vm.GLOBAL.convertPrice(item.lowest_price);
              item.reward = vm.GLOBAL.convertPrice(item.reward);
              item.time = item.attach;
            });
          }
          vm.vipData = rep.data.data;
        })
      },
      save() {
        let vm = this;
        this.$refs['myForm'].validate((valid) => {
          if (valid) {
            vm.loading = true;
            let skus = [];
            vm.vipData.sku.forEach((v, index) => {
              let item = JSON.parse(JSON.stringify(v));
              item.original_price = vm.GLOBAL.reconvertPrice(v.original_price);
              item.lowest_price = vm.GLOBAL.reconvertPrice(v.lowest_price);
              item.reward = vm.GLOBAL.reconvertPrice(v.reward);
              item.attach = v.time;
              skus.push(item);
            });
            let formData = {
              sku: skus,
              id: vm.vipData.id,
              name: vm.vipData.name,
              banner: vm.vipData.banner,
              top_color: vm.vipData.top_color,
            };
            save(formData).then(rep => {
              vm.loading = false;
              vm.$Message.success('修改成功');
            }, error => {
              vm.loading = false;
            })
          }
        });

      }
    }
  }
</script>